import React, { Component } from 'react'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import CryptoJs from 'crypto-js'
import { Navigate } from 'react-router-dom'
import './style/index.css'
import api from '../../api/index';

export default class index extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  onLogin = (values) => {
   
    api.getBanner('/login', values)
      .then(data => {
        debugger;
        if(data.data.code == 200){
          this.setState({ logined: true });
        }
          sessionStorage.setItem('token',data.data.data.token);
          sessionStorage.setItem('account',data.data.data.name);
          
      })
    // console.log(values)
    // global.service.post('/api/login', { ...values, password: CryptoJs.AES.encrypt(values.password, '12345678').toString() })
    //     .then(data => {
    //         //  
    //         this.setState({logined:true})
    //         // sessionStorage.setItem('account',values.account)
    //         sessionStorage.setItem('token',data.token)
    //     })
    // api.getBanner('/login',values)
    // .then(res=>{
    //   console.log('jldf')
    // })
  }
  render() {
    return <div className="m-login">
      <Form onFinish={this.onLogin}>
        <h4>欢迎登录</h4>
        <Form.Item name='account' rules={[{ required: true, message: 'Please enter the account' }]}>
          <Input prefix={<UserOutlined />} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item name='password' rules={[{ required: true, message: 'Please enter the password' }]}>
          <Input type='password' prefix={<LockOutlined />} placeholder="请输入密码" />
        </Form.Item>
        <Form.Item  >
          <Button block type='primary' htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
      {this.state.logined && <Navigate to='/' />}
    </div>
  }
}
